<template>
	<view class="vui-tab">
		<block v-for="(it, k) in data" :key="k">
			<view :class="['vui-tab-i', index === k ? 'active' : '']" @click="action(k)">{{it}}</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'vui-tab',
		props: ['vuiData', 'index'],
		methods:{
			/**
			 * @des 执行action函数
			 */
			action(val) {
				this.$emit('vuiTab', val);
			}
		}
	}
</script>

<style lang="scss">
	/* tab */
	.vui-tab {display: flex; justify-content: space-around; flex-wrap: nowrap; width: 100%;}
	.vui-tab .vui-tab-i {flex: 1; height: 80upx; border-bottom: 1px solid #f4f4f4; line-height: 80upx; color: #666;}
	.vui-tab .vui-tab-i.active {background-color: $uni-bg-color-colours; font-weight: bold; color: #333;}
</style>
